<template>
  <div class="my-child">
    <top-bar-detail :headline="headline" hideShare jump="/fsc"></top-bar-detail>
    <div class="container pt">
      <ul class="my-clildren-list">
        <li v-for="(item,index) of childrenList" :key="index">
          <div class="fr"><i class="icon i-arr-del" @click="delChild(item.childPersonId,index)"></i></div>
          <div @click="jumpInfo(item.childPersonId)">
            <img :src="item.headPic | defaultImg" />
            <span>{{item.childName}}</span>
          </div>
        </li>
      </ul>
      <p class="nodata" v-if="roading">{{ roading && '正在加载' }}</p>
      <p class="nodataimg" v-if="isNodata"></p>
    </div>
    <toolbar><div class="add-btn" @click="addChild">tianjia</div></toolbar>
  </div>
</template>

<script>
  import topBarDetail from '../../components/topbarDetail'
  import {getMyChildrenlist,delChildById} from '../../router/api'
  import toolbar from '../../components/toolbar'
  export default {
    data() {
      return {
        headline: '我的学生',
        childrenList: [],
        roading: true,
        isNodata: false
      }
    },
    filters: {
      defaultImg(img){
        return img || 'http://img.mimiedu.com/default/headPic.png'
      }
    },
    mounted() {
      getMyChildrenlist().then( d =>{
        this.roading = false;
        if(d.code == 200){
          this.childrenList = d.value
          if(d.value.length == 0){
            this.isNodata = true;
          }
        }else{
          //this.isNodata = true;
        }
      })
    },
    methods: {
      //跳到学生详情
      jumpInfo(val){
        this.$router.push('/list' + val)
      },
      //添加学生
      addChild(){
        this.$router.push('/addchild')
      },
      //删除学生
      delChild(childPersonId,index){
        this.$confirm('确定要删除吗？','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: ''
        }).then(d=>{
          delChildById(childPersonId).then(d => {
            if(d.code == 200){
              this.$message({
                message: '删除成功！',
                iconClass: 'icon-hide',
                duration: 1000
              })
              this.childrenList.splice(index,1);
            }else{
              this.$message({message: d.message, iconClass: 'icon-hide'});
            }
          })
        })
      }
    },
    components: {topBarDetail,toolbar}
  }
</script>

<style lang="less">
  .my-child{
    .container{background-color:#fafafa;}
    .my-clildren-list{padding:.2rem 0;
      li{padding:0.48rem .58rem;margin-top:.4285rem;font-size:.764rem;background-color:#fff;line-height:1.584rem;
        img{width:1.584rem;height:1.584rem;}
        span{padding-left:.48rem;
          &.small{padding-left:.238rem;font-size:.5714rem;}
        }
        .i-arr-del{width:0.619rem;height:0.6666rem;background-image: url(../../assets/image/ic_rubbish.png);vertical-align:middle;}
      }
    }
    .add-btn{width:3.3333rem;height:3.3333rem;
      .i-join{width:3.3333rem;height:3.3333rem;background-image: url(../../assets/image/ic_fab_add.png);}
    }
  }
</style>